{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>注册</title>
  <link rel="stylesheet" href="{% static 'assets/css/amazeui.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/common.min.css' %}" />
  <link rel="stylesheet" href="{% static 'assets/css/other.min.css' %}" />
</head>
<body class="register-container">
  <div class="layout">
    <!--===========layout-header================-->
    <div class="layout-header am-hide-sm-only">
      <!--topbar start-->
      <div class="topbar">
        <div class="container">
          <div class="am-g">
            <div class="am-u-md-3">
              <div class="topbar-left">
                <i class="am-icon-globe"></i>
                <div class="am-dropdown" data-am-dropdown>
                  <button class="am-btn am-btn-primary am-dropdown-toggle" data-am-dropdown-toggle>Language <span class="am-icon-caret-down"></span></button>
                  <ul class="am-dropdown-content">
                    <li><a href="#">English</a></li>
                    <li class="am-divider"></li>
                    <li><a href="#">中文</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="am-u-md-9">
              <div class="topbar-right am-text-right am-fr">
                Follow us
                <i class="am-icon-facebook"></i>
                <i class="am-icon-twitter"></i>
                <i class="am-icon-google-plus"></i>
                <i class="am-icon-pinterest"></i>
                <i class="am-icon-instagram"></i>
                <i class="am-icon-linkedin"></i>
                <i class="am-icon-youtube-play"></i>
                <i class="am-icon-rss"></i>
                {% if request.session.s_name_001 %}
                {{ request.session.s_name_001 }},您好！<a href="/logout">注销</a>
                  {% else %}
                 <a href="/login">登录</a>
                <a href="/register">注册</a>
                  {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
     </div>

    <!--===========layout-container================-->
    <div class="register-box">
      <form method="post" class="am-form" data-am-validator>
          {% csrf_token %}
        <fieldset>
          <legend>注册用户</legend>

          <div class="am-form-group">
            <div class="am-g">
              <div class="am-u-md-2 am-padding-0 am-text-right">
                <label for="doc-vld-name-2" class="register-name">账号</label>
              </div>
              <div class="am-u-md-10">
                <input type="text" name="username" id="doc-vld-name-2" minlength="3" placeholder="输入用户名（至少 3 个字符）" required/>
              </div>
            </div>
          </div>

          <div class="am-form-group">
            <div class="am-g">
              <div class="am-u-md-2 am-padding-0 am-text-right">
                <label for="doc-vld-name-2" class="register-name">昵称</label>
              </div>
              <div class="am-u-md-10">
                <input type="text" name="nickname" id="doc-vld-name-2" minlength="2" placeholder="输入用户昵称" required/>
              </div>
            </div>
          </div>

          <div class="am-form-group">
            <div class="am-g">
              <div class="am-u-md-2 am-padding-0 am-text-right">
                <label for="doc-vld-pwd-1" class="register-pwd">密码</label>
              </div>
              <div class="am-u-md-10">
                <input type="password" name="password" id="doc-vld-pwd-1" placeholder="输入6位密码" pattern="^\w{6}$" required/>
              </div>
            </div>
          </div>

          <div class="am-form-group">
            <div class="am-g">
              <div class="am-u-md-2 am-padding-0 am-text-right">
                <label for="doc-vld-pwd-2">确认密码</label>
              </div>
              <div class="am-u-md-10">
                <input type="password" id="doc-vld-pwd-2" placeholder="请与上面输入的值一致" data-equal-to="#doc-vld-pwd-1" required/>
              </div>
            </div>
          </div>

          <div class="am-form-group">
            <div class="am-g">
              <div class="am-u-md-2 am-padding-0 am-text-right">
                <label for="doc-vld-email-2" class="register-email">邮箱地址</label>
              </div>
              <div class="am-u-md-10">
                <input type="email" name="email" id="doc-vld-email-2" placeholder="输入正确的邮箱地址" required/>
              </div>
            </div>
          </div>

          <div class="am-g">
            <div class="am-u-md-10">
              <button class="am-btn am-btn-secondary" type="submit">注册</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
  <script src="{% static 'assets/js/jquery-2.1.0.js' %}" charset="utf-8"></script>
  <script src="{% static 'assets/js/amazeui.js' %}" charset="utf-8"></script>
</body>
</html>